
<template>
  <header>
    <div class="wrapper">
      <nav class="nav">
        <RouterLink to="/">
          <img src="https://mall.leyifan.com/static/h5/new_images/home_active.png" alt="" />
          <span>首页</span></RouterLink
        >
        <RouterLink to="/classify">
          <img src="https://mall.leyifan.com/static/h5/new_images/site.png" alt="" />
          <span>分类</span></RouterLink
        >
        <RouterLink to="/pay">
          <img src="https://mall.leyifan.com/static/h5/new_images/shopping.png" alt="" />
          <span class="txt">购物车</span></RouterLink
        >
        <RouterLink to="/my">
          <img src="https://mall.leyifan.com/static/h5/new_images/my.png" alt="" />
          <span>我的</span></RouterLink
        >
      </nav>
    </div>
    <RouterView />
  </header>
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<style scoped lang="less">
.wrapper {
  font-size: 15rem;
  nav a.router-link-exact-active {
    /* color: var(--color-text); */
    color: red;
  }
  nav {
    z-index: 1000;
    // padding: 30rem;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 49rem;
    // background-color: pink;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // border-top: 1px solid #ccc;
    background-color: white;
    img {
      width: 26rem;
      height: 26rem;
      webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      display: block;
    }
    a {
      font-size: 10rem;
      font-weight: bold;
      // color: #ccc;
      color: #333333;
      text-decoration: none;
      span {
        font-size: 10rem;
        display: block;
        margin-left: 3rem;
        margin-top: 2rem;
      }
      .txt {
        margin-left: 0rem;
      }
      &.router-link-exact-active {
        // color: #307f61;
        color: #ff3d58;
      }
    }
  }
}
</style>
